import { Redirect } from 'react-router-dom'
import { Route } from 'react-router-dom'
import { Switch } from 'react-router-dom'
import { HashRouter as Router } from 'react-router-dom'
import React, { Component } from 'react'
import Nowplaying from './films/Nowplaying'
import Comingsoon from './films/Comingsoon'
import { store } from '../redux/store'
import { Swiper } from 'antd-mobile'
import { Tabs } from 'antd-mobile'

export default class Films extends Component {
  state ={
    city:store.getState().CityReducer.city
  }
  handleClick1(){
    this.props.history.push('/films/nowplaying')
  }
  handleClick2(){
    this.props.history.push('/films/commingsoon')
  }
  render() {
    const list = ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0G020114924%2F200G0114924-15-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657442417&t=478984c2c903caaf8c34632a98c14d98', 
                  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F210924233115O14-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657442450&t=30f5a0e83f005336d83ccbf79d99047a']
    const items = list.map(item => (
      <Swiper.Item key={item}>
        <img src={item} alt='' style={{width:'100%'}}/>
      </Swiper.Item>
    ))
    return (
      <div>
        <Swiper loop autoplay indicator={() => null}>{items}</Swiper>
        <div onClick={()=>{
          this.props.history.push('/city')
        }} style={{position:'fixed', padding:'1px', top:'1rem', left:'1rem', color:'white', borderRadius:'.25rem', backgroundColor:'rgba(0, 0, 0, 0.3)'}}>{this.state.city}</div>
        <Router>
        <div style={{position:'sticky', top:'0'}}>
          <Tabs onChange={(value)=>{
            this.props.history.push(value)
          }} activeKey={this.props.location.pathname}>
            <Tabs.Tab title='正在热映' key='/films/nowplaying'>
              
            </Tabs.Tab>
            <Tabs.Tab title='即将上映' key='/films/commingsoon'>
              
            </Tabs.Tab>
          </Tabs>
        </div>
          <Switch>
            <Route path='/films/nowplaying' component={Nowplaying}></Route>
            <Route path='/films/commingsoon' component={Comingsoon}></Route>
            <Redirect from='/films' to='/films/nowplaying'></Redirect>
          </Switch>
        </Router>
      </div>
    )
  }
}